<!--
 * @Author: your name
 * @Date: 2022-01-19 10:24:19
 * @LastEditTime: 2023-03-23 10:01:32
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/radioList/demo.vue
-->
<script setup>
import { RadioList } from '../../../packages/lib/index'
// import RadioList from '../../../packages/radioList';
import { ref, watch } from 'vue'

const actions = [
  {
    name: '二级审批',
    detail: '飞机票的差旅政策',
    value: '二级审批'
  },
  {
    name: '火车票',
    value: '火车票'
  },
  {
    name: '酒店',
    detail: '酒店的差旅政策',
    value: '酒店'
  },
  {
    name: '禁用字段',
    detail: '酒店的差旅政策',
    disabled: true
  },
  {
    name: '二级审批',
    detail: '飞机票的差旅政策',
    value: '二级审批'
  }
]
const visible_1 = ref(false)
const visible_2 = ref(false)

const actionIndex = ref()
const actionIndex_2 = ref()
const defaults = () => {
  actionIndex.value = 1
  visible_1.value = true
}
const defaults_1 = () => {
  visible_1.value = true
  actionIndex.value = -1
}
const Checkbox = () => {
  visible_2.value = true
  actionIndex_2.value = [1, 2]
}
const confirm = (value) => {
  console.log(value)
}
</script>

<template>
  <div>
    <button @click="defaults">单选</button>
    <button @click="defaults_1">单选_1</button>
    <RadioList v-model:show="visible_1" :actions="actions" :actionIndex="actionIndex" title="差旅政策" @confirm="confirm">
      <template #title>自定义</template>
    </RadioList>
    <button @click="Checkbox">多选</button>
    <RadioList v-model:show="visible_2" :isCheckbox="true" :actionIndex="actionIndex_2" :actions="actions" @confirm="confirm"> </RadioList>
  </div>
</template>

<style>
</style>
